<template>
  <div class="userAdd" style="height: 800px">
    <el-dialog v-bind="$attrs" :visible.sync="showDialog" v-on="$listeners" @open="onOpen" @close="onClose" title="" >
            <el-form ref="elForm" :model="activitiVO" :rules="rules" size="medium" label-width="100px" style="height: 300px">
              <el-col :span="24">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="username">
                    <el-input v-model="activitiVO.username" placeholder="请输入姓名" readonly  :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="请假类型" label-width="70px">
                    <el-select v-model="activitiVO.types" placeholder="请选择">
                      <el-option
                        v-for="item in typeList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                        <span style="float: left">{{ item }}</span>
<!--                        <span style="float: right; color: #8492a6; font-size: 13px">-->
<!--                       <span class="el-tag el-tag&#45;&#45;success el-tag&#45;&#45;mini el-tag&#45;&#45;plain">{{ item }}</span></span>-->
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="12">
                <el-form-item label="请假天速" prop="types">
                  <el-input v-model="activitiVO.days" placeholder="请输入请假天数"  :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
                <el-form-item label="请假描述" prop="contents">
                  <el-input v-model="activitiVO.contents" placeholder="请输入请假描述" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="addNewApplys('elForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addNewApply} from '@/api/activity'
import { saveRMPUss } from '@/api/role'

export default {
name: "MyworkAdd",
  data(){
    return{
      showDialog:false,
      activitiVO:{
        key:'',
        username:'',
        types:'',
        days:'',
        contents:'',
      },
      typeList:['事假','病假','调休','婚假','其他'],
      rules: {
        username: [{
          required: true,
          message: '请输入用户姓名',
          trigger: 'blur'
        }],
        types: [{
          required: true,
          message: '请输入请假类型',
          trigger: 'change'
        }],
        days: [{
          required: true,
          message: '请输入请假天数',
          trigger: 'blur'
        }],
        contents: [{
          required: true,
          message: '请输入请假描述',
          trigger: 'blur'
        }],
      },
    }
  },
  created () {
    this.activitiVO.username = this.$store.getters.getUserInfo.username
  },
  props:{
    addVisible:{
      type : Boolean,
      default:false
    },
    processId:{
      type : String,
      default:''
    },
  },
  watch:{
    addVisible:function(){
      this.showDialog = this.addVisible
    },
    processId:function(){
      this.activitiVO.key = this.processId
      console.log(this.activitiVO.key)
    },
  },
  methods:{
    addNewApplys(){
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          addNewApply(this.activitiVO).then(res=>{
              console.log(res)
            return this.$message.success(res.data.msg)
          })
        } else {
          return this.$message.error('请假信息不完整')
        }
      });


    },
    onClose() {
      this.$refs['elForm'].resetFields()
      console.log("onClose");
      this.$emit('changeShowAdd','false')
      this.roleId=''
      this.upRoleVO={}
    },
    close() {
      console.log("Close");
      // this.$emit('update:visible', false)
      this.$emit('changeShowAdd','false')
      this.roleId=''
    },
    onOpen(){},
  }
}
</script>

<style scoped>
.el-dialog__body{
  height: 450px;
  width: 700px;
}
</style>
